<template>
  <div class="home-upcoming">
    <h2 class="class-title">即将上映(23部)<span class="go">全部></span></h2>
    <el-row>
      <el-col
        class="upcoming-module"
        :span="5"
        v-for="upComing in upComingList"
        :key="upComing.id"
      >
        <el-card :body-style="{ padding: '0px' }">
          <img
            :src="upComing.img_url"
            class="image"
          >
          <p class="title">{{ upComing.title }}</p>
          <div class="num">{{ upComing.num }}人想看</div>
          <el-button-group>
            <el-button
              plain
              disabled
            >预告片</el-button>
            <el-button class="el-button el-button--primary">预售</el-button>
          </el-button-group>
          <p class="start_date">{{ upComing.start_date }}上映</p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data: () => ({
    upComingList: []
  }),
  created() {
    this.getUpComing()
  },
  methods: {
    async getUpComing() {
      try {
        const { data: { message } } = await this.Api.getUpComing()
        this.upComingList = message
      } catch (error) {
        this.$MsgBox('获取首页即将上映的信息失败')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.home-upcoming{
  .class-title {
    color: #2d98f3;
  }
  .el-card {
    height: 330px;
    .title {
      bottom: 108px;
    }
    .num {
      height: 24px;
      padding-left: 10px;
    }
    .el-button-group {
      width: 100%;
      height: 100%;
      .el-button {
        width: 50%;
      }
    }
    .start_date {
      height: 40px;
      text-align: center;
      color: #999;
      font-size: 14px;
      line-height: 40px;
    }
  }
}
</style>